<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'stuproject' }">我的项目管理</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="new-box "  >
            <el-table
            
                :data="myxmlist"
                style="width:100%;margin-top:20px"
            >
                <el-table-column label="序号"  type="index"></el-table-column>
                <el-table-column label="课题名称" prop="xmname"></el-table-column>
                <el-table-column label="课题地址" >
                    <template slot-scope="scope">
                        <a :href="scope.row.xmlink" target="_blank"  >{{scope.row.xmlink}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="二维码" >
                    <template slot-scope="scope">
                        <img @click="seeBigCode(scope.row.xmlink)" src="../../assets/barcode.png" style="cursor:pointer" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="课题类别" >
                    <template slot-scope="scope">
                        <el-tag effect="dark" type="primary" > {{scope.row.xmcategorytext}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="课题描述" prop="xmdesc"></el-table-column>
                <el-table-column label="技术" prop="xmtech"></el-table-column>
                <el-table-column label="难点亮点" prop="xmbug"></el-table-column>
                <el-table-column label="得分" prop="score">
                    <template slot-scope="scope">
                        <el-tag effect="dark" type="info"  v-if="scope.row.score==0" > 未打分 </el-tag>
                        <el-tag effect="dark" type="danger"  v-if="scope.row.score!=0" > {{scope.row.score}} </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" label-width="160px" >
                    <template slot-scope="scope">
                        <el-button @click="showUpdateDialog(scope.row)" type="primary" size="mini" v-if="scope.row.score==0"  icon="el-icon-edit" circle></el-button>
                        <el-button @click="delOne(scope.row._id)" type="danger" size="mini" v-if="scope.row.score==0" icon="el-icon-delete" circle></el-button>
                        <el-button type="primary" size="mini" icon="el-icon-search " circle> </el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>

        <el-dialog
            title="修改项目信息"
            :visible.sync="dialogVisible"
            width="30%"
        :before-close="handleClose">
        <el-form
            :model="form"
            ref="updateref"
            label-position="left"
             label-width="80px"
        >
            <el-form-item label="项目名称"  >
                <el-input v-model="form.xmname" />
            </el-form-item>
            <el-form-item label="项目地址"  >
                <el-input  v-model="form.xmlink"  />
            </el-form-item>
            <el-form-item label="项目类别"  >
                 <el-select v-model="form.xmcategory" @change="settext"  placeholder="请输入项目类别" >
                    <el-option :value="cate.procode" :label="cate.proname" v-for="(cate,i) in categories" :key="i"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目描述"  >
                <el-input type="textarea" v-model="form.xmdesc"  />
            </el-form-item>
            <el-form-item label="项目技术"  >
                <el-input type="textarea" v-model="form.xmtech"  />
            </el-form-item>
            <el-form-item label="亮点难点"  >
                <el-input type="textarea" v-model="form.xmbug"  />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">暂不修改</el-button>
            <el-button type="primary" @click="updateSubmit">修改</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>

import {mapState, mapMutations} from "vuex"
import {mymixins} from "@/utils"
export default {
    mixins:[mymixins],
    data(){
        return {
            myxmlist:[],
            dialogVisible:false,
            form:{},
            
        }
    },
    computed:{
        ...mapState(['userinfo','categories'])
    },
    methods:{
        ...mapMutations(['changecategories']),
        settext(){
         
        },
        updateSubmit(){
            console.log(this.form);
            this.$axios.post("/vue/updatexmone",this.form)
            .then(res=>{
                if(res.data.type){
                    this.dialogVisible = false;
                    this.form = {}
                    this.$axios.post("/vue/getoneuserxm")
                    .then(res=>{
                        if(res.data.type){
                            this.myxmlist = res.data.result;
                        }
                    })
                }
            })
        },
        showUpdateDialog(row){
            // 请求项目列表 
            if(this.categories.length==0){    // vuex 临时缓存 
                this.$axios.post("/vue/getpronamelist",{
                    xkid:this.userinfo.xkid
                })
                .then(res=>{
                    // this.categories = res.data.result;
                    if(res.data.type){
                        this.changecategories(res.data.result)
                    }
                })
            }
            this.dialogVisible = true;
            this.form = row;
        },
        handleClose(){
            this.dialogVisible  = false;
        },
        delOne(_id){
            this.$axios.post("/vue/delmyxm",{
                _id
            }).then(res=>{
                if(res.data.type){
                    this.myxmlist = this.myxmlist.filter(item=>item._id!==_id)
                }
            })
        },
        
    },
    mounted(){
        this.$axios.post("/vue/getoneuserxm")
        .then(res=>{
            if(res.data.type){
                this.myxmlist = res.data.result;
                console.log(this.myxmlist);
            }
        })


       

    }
}
</script>
